// import {renderEngin} from "./function/renderEnginforIndex";

import row from "element-ui/packages/row/src/row";

export function addBroadcast(map, data_content, that) {
    //加载PointSimplifier，loadUI的路径参数为模块名中 'ui/' 之后的部分
    AMapUI.loadUI(['misc/PointSimplifier'], function (PointSimplifier) {

        if (!PointSimplifier.supportCanvas) {
            return;
        }

        //启动页面
        initPage(PointSimplifier, map, data_content, that);
    });
}

function initPage(PointSimplifier, map, data_content) {
    //创建组件实例
    var pointSimplifierIns = new PointSimplifier({
        map: map, //关联的map
        getPosition: function (dataItem) {
            //返回数据项的经纬度，AMap.LngLat实例或者经纬度数组
            return dataItem.lnglat;
        },
        getHoverTitle: function (dataItem) {
            //返回数据项的Title信息，鼠标hover时显示
            return dataItem.monitor;
        },
        renderOptions: {
            //点的样式
            drawPositionPoint: false,
            pointStyle: {
                fillStyle: 'red',
                width: 10,
                height: 10,
            },
            pointHoverStyle: {
                content: "none",
                width: 15,
                height: 15,
            },
            hoverTitleStyle: {
                position: "top",
                ClassName: "hovertitle"
            }
        },
        zIndex: 777,
        autoSetFitView: false
    });

    //设置数据源，data需要是一个数组
    pointSimplifierIns.setData(data_content);

    //监听事件
    pointSimplifierIns.on('pointMouseover', function (e, record) {
        let infowindow = addInfoWindow(record.data.data);
        infowindow.open(map, record.data.lnglat);
    });

    //监听事件
    pointSimplifierIns.on('pointMouseout', function () {
        closeInfoWindow(map)
    });

    map.setCenter(data_content[0].lnglat);
    return pointSimplifierIns
}

export function updateBroadcast(map, data_content, pointSimplifierIns) {
    pointSimplifierIns.setData(data_content);
    // map.setCenter(data_content[0].lnglat);
}

const title = '监测人员'

function addInfoWindow(content) {
    return new AMap.InfoWindow({
        isCustom: true, //使用自定义窗体
        content: createInfoWindow(title, content),
        offset: new AMap.Pixel(16, -45)
    });
}


function createInfoWindow(title, content) {
    let info = document.createElement("div");
    info.className = "custom-info input-card content-window-card";
    //可以通过下面的方式修改自定义窗体的宽高
    //info.style.width = "400px";
    // 定义顶部标题
    let top = document.createElement("div");
    let titleD = document.createElement("div");
    let closeX = document.createElement("img");
    top.className = "info-top";
    titleD.innerHTML = title;
    closeX.src = "https://webapi.amap.com/images/close2.gif";
    closeX.onclick = closeInfoWindow;

    top.appendChild(titleD);
    top.appendChild(closeX);
    info.appendChild(top);

    // 定义中部内容
    let middle = document.createElement("div");
    middle.className = "info-middle";
    middle.style.backgroundColor = 'rgb(0,0,0,0.5)';
    for (let i = 0; i < content.length; i++) {
        let rowInfo = document.createElement("div")
        rowInfo.innerHTML = `<span style="color: #ffffff">频点:${content[i].freq} 类型:${content[i].category} 时间:${content[i].time}</span><br/>`
        middle.appendChild(rowInfo)
    }
    info.appendChild(middle);

    // 定义底部内容
    let bottom = document.createElement("div");
    bottom.className = "info-bottom";
    bottom.style.position = 'relative';
    bottom.style.top = '0px';
    bottom.style.margin = '0 auto';
    let sharp = document.createElement("img");
    sharp.src = "https://webapi.amap.com/images/sharp.png";
    bottom.appendChild(sharp);
    info.appendChild(bottom);
    return info;
}

//关闭信息窗体
function closeInfoWindow(map) {
    map.clearInfoWindow();
}
